<template>
    <div :style="{height: h,width: w}"
    class="login">
        <h1>欢迎登录瓜夕夕</h1>
        <van-form v-if="name" @submit="onSubmit">
            <van-field
            v-model="username"
            :rules="[{ required: true, message: '' }]"
            class="input"
            name="username"
            label="用户名:"
            placeholder="请输入用户名"
            >
            </van-field>
            <van-field
            v-model="password"
            :rules="[{ required: true, message: '' }]"
            class="input"
            type="password"
            name="password"
            label="密码:"
            placeholder="请输入密码"
            >
            </van-field>
            <div>
            <span @click="user" class="span1">用户名登录|</span><span @click="phone" class="span2">手机号登录</span> <router-link to="/register">去注册</router-link>
            </div> 
            <van-button round class="but" type="primary" block native-type="submit">点击登录</van-button>
        </van-form> 
    </div>
</template>
<script>
export default {
    data(){
        return{
            w:'375px',
            h:'667px',
            name:'true',
            username:'',
            password:'',
            uphone:'' ,
            upassword:''
        }
    },
    methods: {
        user(){
            this.name=true;
        },
        phone(){
            this.name=false;
        },
        onSubmit(values) {
            // console.log('submit', values);
            this.axios.post("/login",`uname=${values.username}&upwd=${values.password}`).then(result=>{
                console.log(result)
                if(result.data.code==200){ //登录成功
                    this.$toast.success(result.data.message); 
                    let username = values.username;   //获取用户名
                    this.$store.commit('loginOK', username);
                    
                    //向sessionStorage中存储islogin与username
                    sessionStorage.setItem('islogin', 'true');
                    sessionStorage.setItem('username', username);
                    // 跳转到主页
                    this.$router.push('/')
                }else if(result.data.code==201){
                    this.$toast.fail(result.data.message);
                }
            })
        }
    },
    mounted() {
        this.h=window.screen.height+'px';
        this.w=window.screen.width+'px';
        // console.log(this.w,this.h)
    },
}
</script>
<style scoped>

.login{
    background-image: url(../assets/bj5.jpeg);
    background-repeat: no-repeat;
    background-size: 100%;
    box-sizing: border-box;
}
.login h1{
    font-size: 2rem;
    padding-top:30%;
    padding-left:20%;
    color: #000;
}
.login .input{
    background: none;
    border-bottom:2px solid black;
    margin-top: 10%;
    margin-bottom: 10%;
    padding-left: 10%;
    font-size: 1rem;
    font-weight: bold;
}

.login span{
    font-size: 1.1rem;
    font-weight: bold;
    color: #91C45D;
}
.login a{
    font-size: 1.1rem;
    font-weight: bold;
    color: #91C45D;
    margin-left: 20%;
}
.login .span1{
    margin-left: 8%;
}
.but{
    margin-top: 1rem;
    background-color: rgb(21, 134, 168);
}
</style>
